// 文章类别管理
// 一、进入页面之后发送请求,加载文章类别,后面删除发表等也需要用到,左右封装函数方便后面调用
// 1.1 发送请求
function loadList() {
    getCates(res => {
        // console.log(res);
        // 1.2 清空页面那种原有的标签
        $('tbody').empty('')

        // 1.3 遍历数据,渲染页面
        res.data.data.forEach((item, index) => {
            // 1.4 生成标签
            const resHtml = `
            <tr>
              <td>${item.name}</td>
              <td>${item.alias}</td>
              <td>
                <button myid="${item.Id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>

                <button myid="${item.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
              </td>
            </tr>
            `;
            // 1.5 添加到标签中
            $('tbody').append(resHtml)
        })
    })
}
loadList()

// 二、添加类别功能
// 准备需要添加到弹出层的模版
const add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>
`;
// 2.1 注册点击事件
$('.add').on('click', () => {
    // 2.2 利用layui插件添加弹出层
    const index = layer.open({
        title: '添加类别',
        content: add_str,
        // 宽高
        area: ['500px', '300px'],
        // 弹出成功后执行的函数
        success() {
            // 2.3 给表单注册提交事件
            $('.add-form').on('submit', function(e) {
                // 2.3.1 阻止默认行为
                e.preventDefault();
                // 2.3.2 获取表单的值
                const dataStr = $(this).serialize();
                // 2.3.3 发送请求
                // console.log(data);
                postAddCates(dataStr, (res) => {
                    // 2.3.5 请求成功后,重新加载页面并关闭弹出层
                    loadList()
                    layer.close(index)
                })
            })
        }
    });
})


// 三、编辑功能
// 弹出层中的模版
const edit_str = `
  <form class="layui-form edit-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>
  `;
// 3.1 因为是动态生成的按钮,需要委托注册事件
$('tbody').on('click', '.edit', function(e) {
    // 3.2 获取该按钮上之前保留的属性值
    const Id = $(e.target).attr('myid')
    const name = $(e.target).attr('data-name')
    const alias = $(e.target).attr('data-alias');
    // 3.3 弹出层的处理
    const index = layer.open({
        title: '编辑类别',
        content: edit_str,
        // 宽高
        area: ['500px', '300px'],

        // 弹出成功后执行的函数
        success() {
            // 3.3 将之前获取的值赋值给表单,利用layui的方法
            //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            form.val("edit", { Id, name, alias });
            // 3.4 给表单注册提交事件
            $('.edit-form').on('submit', (e) => {
                // 3.4.1 阻止默认行为
                e.preventDefault();
                // 3.4.2 获取表单的值,转化成需要的格式,然后发送请求
                // const dataStr = form.val("edit");  // layui获取值的方法  获取到的是对象格式
                const dataStr = $('.edit-form').serialize();
                // console.log(dataStr);
                postUpDateCate(dataStr, (res) => {
                    // 3.4.3 请求成功后,重新加载页面并关闭弹出层
                    loadList()
                    layer.close(index)
                })
            })
        }
    });

})

// 四、删除功能
// 4.1 委托注册事件 
$('tbody').on('click', '.delete', function(e) {
    // 4.2 点击后询问用户是否确定删除
    layer.confirm('确定删除吗?', { icon: 3, title: '提示' }, function(index) {
        // 4.3 确定删除后发送请求删除响应数据
        getDeleteCates($(e.target).attr('myid'), res => {
            // 4.4 删除成功后,因为后台的数据已经更新了,如果再调用loadList()重绘页面,会降低页面性能
            // 所有我们只需要将对应的节点移除即可
            // console.log(res);
            if (res.status == 200) {
                $(e.target).parents('tr').remove()
            }
        })

        layer.close(index);
    });
})